:root {
  --control-text-color: #777;
  --select-text-bg-color: #ebe1f5;
  --search-select-bg-color: #8163bd;

  --title-color: #6c549c;
  --text-color: #333333;
  --light-text-color: #666666;

  --link-color: #745fb5;
  --code-color: #ff79c6;
  --purple-light-1: rgba(116, 95, 181, 0.05);
  --purple-light-2: rgba(116, 95, 181, 0.1);
  --purple-light-3: rgba(116, 95, 181, 0.3);
  --purple-light-4: rgba(116, 95, 181, 0.7);
  --border: #eee;

  --shadow: 0rem 0.2rem 0.4rem var(--purple-light-2);

  /* side bar */
  --side-bar-bg-color: #f7f7fb;
  --active-file-text-color: var(--title-color);
  --active-file-bg-color: var(--purple-light-2);
  --item-hover-bg-color: var(--purple-light-2);
  --active-file-border-color: var(--purple-light-4);

  --base-font: "Helvetica Neue", "Noto Sans", -apple-system, Ubuntu,
    "Microsoft YaHei", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans",
    "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC",
    "Source Han Sans CN", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti",
    SimHei, "WenQuanYi Zen Hei Sharp", "Source Sans Pro", sans-serif;
  --title-font: "Noto Serif", "Noto Serif CJK SC", "EB Garamond", Georgia,
    "Nimbus Roman No9 L", "Songti SC", "Source Han Serif SC",
    "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun,
    SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN",
    "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU,
    "Ubuntu", "Source Sans Pro", serif;
  --monospace: "JetBrains Mono", "Fira Code", "Cascadia Code", "Sarasa Term SC",
    Monaco, "Deja Vu Sans Mono", Consolas, "Lucida Console", "Andale Mono",
    "Roboto Mono", Courier, Monospace !important;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: initial;
}

body {
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6rem;
  letter-spacing: 0;
  overflow-x: hidden;
}

/* 页边距 和 页面大小 */
#write {
  font-family: var(--base-font);
  /* max-width: 914px; */
  margin: 0 auto;
  padding: 1rem 4rem;
  padding-bottom: 100px;
}

#write p {
  line-height: 1.6rem;
  word-spacing: 0.05rem;
}

body > *:first-child {
  margin-top: 0 !important;
}

body > *:last-child {
  margin-bottom: 0 !important;
}

a {
  color: var(--link-color);
  text-decoration: none;
}
#write a:hover {
  border-bottom: 1px solid var(--link-color);
  color: var(--link-color);
  text-decoration: none;
}
.md-content {
  color: var(--purple-light-4);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: normal;
  line-height: 1.4;
  cursor: text;
  color: var(--title-color);
  font-family: var(--title-font);
}

h1 tt,
h1 code {
  font-size: inherit !important;
}
h2 tt,
h2 code {
  font-size: inherit !important;
}
h3 tt,
h3 code {
  font-size: inherit !important;
}
h4 tt,
h4 code {
  font-size: inherit !important;
}
h5 tt,
h5 code {
  font-size: inherit !important;
}
h6 tt,
h6 code {
  font-size: inherit !important;
}

h1 {
  padding-bottom: 0.4rem;
  font-size: 2.2rem;
  line-height: 1.3;
}
h1 {
  text-align: center;
  font-size: 2.25em;
  line-height: 1.2;
}
h1:after {
  content: "";
  display: block;
  margin: 0.2em auto 0;
  width: 6rem;
  height: 2px;
  border-bottom: 2px solid var(--title-color);
}

h2 {
  padding-left: 0.4em;
  line-height: 1.4;
  font-size: 1.75em;
  border-left: 9px solid var(--title-color);
  border-bottom: 1px solid var(--title-color);
}
h3 {
  font-size: 1.5em;
  line-height: 1.43;
}
h4 {
  font-size: 1.25em;
}
h5 {
  font-size: 1.1em;
}
h6 {
  font-size: 1em;
}

p,
blockquote,
ul,
ol,
dl,
table {
  margin: 0.8em 0;
}

/* horizontal rule */
hr {
  margin: 1em auto;
  border: 0;
  border-top: 1px solid var(--border);
}

/* 列表 */
li > ol,
li > ul {
  margin: 0 0;
}

li p.first {
  display: inline-block;
}

ul,
ol {
  padding-left: 2rem;
}

ul:first-child,
ol:first-child {
  margin-top: 0;
}

ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

#write ol li,
ul li {
  padding-left: 0.1rem;
}

/* 引用 */
blockquote {
  border-left: 0.2em solid var(--purple-light-3);
  padding-left: 1em;
  color: var(--light-text-color);
  font-family: var(--base-font);
}

/* 表格 */

table {
  margin-bottom: 1.25rem;
}
table th,
table td {
  padding: 8px;
  line-height: 1.25rem;
  vertical-align: middle;
  border: 1px solid var(--border);
}
table th {
  font-weight: bold;
}
table thead th {
  vertical-align: middle;
}

/* 表格 背景色 */

/* 表格 背景色 */
table tr:nth-child(2n),
thead {
  background-color: #fcfcfc;
}

/* 粗体 */
#write strong {
  padding: 0 2px;
  font-weight: bold;
}

/* 斜体 */
#write em {
  padding: 0 5px 0 2px;
}

/* inline code */
#write code,
tt {
  padding: 2px 4px;
  border-radius: 0.3rem;
  font-family: var(--monospace);
  font-size: 0.92rem;
  color: var(--code-color);
  background-color: var(--purple-light-1);
}

tt {
  margin: 0 2px;
}

#write .md-footnote {
  background-color: var(--purple-light-1);
  color: var(--code-color);
}

/* highlight. */
#write mark {
  background-color: var(--select-text-bg-color);
  border-radius: 0.3rem;
  padding: 2px 4px;
  margin: 0 2px;
  color: var(--text-color);
}

#write del {
  padding: 1px 2px;
}

.md-task-list-item > input {
  margin-left: -1.3em;
}

@media print {
  html {
    font-size: 0.9rem;
  }

  table,
  pre {
    page-break-inside: avoid;
  }

  pre {
    word-wrap: break-word;
  }
}

#write pre.md-meta-block {
  padding: 1rem;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f7f7f7;
  border: 0;
  border-radius: 3px;
  color: #777777;
  margin-top: 0 !important;
}

.mathjax-block > .code-tooltip {
  bottom: 0.375rem;
}

/* 图片 */
.md-image > .md-meta {
  border-radius: 3px;
  font-family: var(--monospace);
  padding: 2px 0 0 4px;
  font-size: 0.9em;
  color: inherit;
}
/* 图片靠左显示 */
/* p .md-image:only-child {
  width: auto;
  text-align: left;
  margin-left: 2rem;
} */

/* 写![shadow-...]() 显示图片阴影 */
img[alt|="shadow"] {
  box-shadow: var(--shadow);
}

#write a.md-toc-inner {
  line-height: 1.6;
  white-space: pre-line;
  border-bottom: none;
  font-size: 0.9rem;
}

header,
.context-menu,
.megamenu-content,
footer {
  font-family: var(--base-font);
}

.file-node-content:hover .file-node-icon,
.file-node-content:hover .file-node-open-state {
  visibility: visible;
}

.md-lang {
  color: #b4654d;
}

.html-for-mac .context-menu {
  --item-hover-bg-color: #e6f0fe;
}

/* 代码框 */
/* CodeMirror 3024 Day theme */

/* 代码段 背景 */
pre {
  --select-text-bg-color: #ebe1f5;
}

/* border and bg */
.md-fences {
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fdfdfd !important;
}
#write pre.md-fences {
  display: block;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow);
}

.cm-s-inner {
  padding: 0.25rem;
  border-radius: 0.25rem;
}

.cm-s-inner.CodeMirror,
.cm-s-inner .CodeMirror-gutters {
  color: #3a3432 !important;
  border: none;
}

.cm-s-inner .CodeMirror-gutters {
  color: #6d8a88;
}

.cm-s-inner .CodeMirror-linenumber {
  padding: 0 0.1rem 0 0.3rem;
  color: #b8b5b4;
}

.cm-s-inner .CodeMirror-line::selection,
.cm-s-inner .CodeMirror-line::-moz-selection,
.cm-s-inner .CodeMirror-line > span::selection,
.cm-s-inner .CodeMirror-line > span::-moz-selection,
.cm-s-inner .CodeMirror-line > span > span::selection,
.cm-s-inner .CodeMirror-line > span > span::-moz-selection {
  background: var(--purple-light-1);
}

.cm-s-inner span.cm-comment {
  color: #cdab53;
}

.cm-s-inner span.cm-string,
.cm-s-inner span.cm-string-2 {
  color: #f2b01d;
}

.cm-s-inner span.cm-number {
  color: #a34e8f;
}

.cm-s-inner span.cm-variable {
  color: #01a252;
}

.cm-s-inner span.cm-variable-2 {
  color: #01a0e4;
}

.cm-s-inner span.cm-def {
  color: var(--text-color);
}

.cm-s-inner span.cm-operator {
  color: #ff79c6;
}

.cm-s-inner span.cm-keyword {
  color: #db2d20;
}

.cm-s-inner span.cm-atom {
  color: #a34e8f;
}

.cm-s-inner span.cm-meta {
  color: inherit;
}

.cm-s-inner span.cm-tag {
  color: #db2d20;
}

.cm-s-inner span.cm-attribute {
  color: #01a252;
}

.cm-s-inner span.cm-qualifier {
  color: #388aa3;
}

.cm-s-inner span.cm-property {
  color: #01a252;
}

.cm-s-inner span.cm-builtin {
  color: #388aa3;
}

.cm-s-inner span.cm-variable-3,
.cm-s-inner span.cm-type {
  color: #ffb86c;
}

.cm-s-inner span.cm-bracket {
  color: #3a3432;
}

.cm-s-inner span.cm-link {
  color: #a34e8f;
}

.cm-s-inner span.cm-error {
  background: #db2d20;
  color: #5c5855;
}

.md-fences.md-focus .cm-s-inner .CodeMirror-activeline-background {
  background: var(--purple-light-1);
}

.cm-s-inner .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: #a34e8f !important;
}

#fences-auto-suggest .active {
  background: #ddd;
}

/* language tip */
#write .code-tooltip {
  border: 1px solid var(--border);
}

.auto-suggest-container {
  border-color: #b4b4b4;
}

.auto-suggest-container .autoComplt-hint.active {
  background: #b4b4b4;
  color: inherit;
}

/* task list */
#write .md-task-list-item > input {
  -webkit-appearance: initial;
  display: block;
  position: absolute;
  border: 1px solid #b4b4b4;
  border-radius: 0.2rem;
  margin-top: 0.3rem;
  height: 1rem;
  width: 1rem;
  transition: background 0.3s;
}

#write .md-task-list-item > input:focus {
  outline: none;
  box-shadow: none;
}

#write .md-task-list-item > input:hover {
  background: #ddd;
}

#write .md-task-list-item > input[checked]::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 50%;
  height: 60%;
  width: 2px;
  transform: rotate(40deg);
  background: #333;
}

#write .md-task-list-item > input[checked]::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 25%;
  height: 30%;
  width: 2px;
  transform: rotate(-40deg);
  background: #333;
}

#write .md-task-list-item > p {
  transition: color 0.3s, opacity 0.3s;
}

#write .md-task-list-item.task-list-done > p {
  color: #b4b4b4;
  text-decoration: line-through;
}

#write .md-task-list-item.task-list-done > p > .md-emoji {
  opacity: 0.5;
}

#write .md-task-list-item.task-list-done > p > .md-link > a {
  opacity: 0.6;
}

/* sidebar and outline */
.pin-outline .outline-active {
  color: var(--active-file-text-color);
}

#typora-sidebar,
.typora-node #typora-sidebar {
  box-shadow: 3px 0px 10px var(--purple-light-2);
}

.file-list-item {
  border-bottom: 1px solid;
  border-color: var(--purple-light-2);
}

.file-list-item-summary {
  font-weight: normal;
}

.file-list-item.active {
  color: var(--active-file-text-color);
  background-color: var(--purple-light-2);
}

.file-tree-node.active > .file-node-background {
  background-color: var(--purple-light-2);
  font-weight: normal;
}

.file-tree-node.active > .file-node-content {
  color: var(--active-file-text-color);
  font-weight: normal;
}

.sidebar-tabs {
  border-bottom: none;
}
.sidebar-tab.active {
  font-weight: normal;
}
.info-panel-tab-border {
  color: var(--purple-light-4);
}

.sidebar-content-content {
  font-size: 0.9rem;
}

/* 搜索 */
.ty-file-search-match-text {
  background-color: var(--purple-light-3);
}
.md-search-hit {
  background-color: var(--purple-light-3);
  contain: style;
}

element.style {
  width: calc(100% - 18px);
}
#file-library-search-input:focus {
  border-color: var(--purple-light-3);
}
.code-tooltip .ty-input:focus,
input:focus {
  border-color: var(--purple-light-3);
}
